<template>
  <div class="hello">
    <div v-for="(value,key) in sysInfo" :key="key">
      <h1>{{key}}:{{value}}</h1>
    </div>
  </div>
</template>

<script>
  import os from 'os'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        sysInfo: {}
      }
    },
    created: function () {
      this.sysInfo = {
        hostname: os.hostname(),
        systemtype: os.type(),
        release: os.release(),
        uptime: os.uptime(),
        loadavg: os.loadavg(),
        totalmem: os.totalmem(),
        freemem: os.freemem(),
        cpus: os.cpus(),
      }
    }
  }
</script>

<style scoped>
  .hello {
    display: flex;
    flex-direction: column;
  }

</style>
